import React, { memo } from 'react'
import { NavLink } from 'react-router-dom'
import {Input} from 'antd';
import {SearchOutlined} from '@ant-design/icons'
import { HeaderWrapper, HeaderLeft, HeaderRight } from './style'
import { headerLink } from 'common/local-data.js'
export default memo(function HNAppFooter() {

    const showSelectItem = (item,index)=>{
        if(index < 3){
            return(
                <NavLink to={item.link} key={item.title}>
                    {item.title}
                    <i className="sprite_01 icon" key={item.title}></i>
                </NavLink>
            )
        }else{
            return <a href={item.link} key={item.title}>{item.title}</a>
        }
    }



    return (
        <HeaderWrapper>
            <div className="content wrap-v1">
                <HeaderLeft>
                    <a href="#/" className="logo sprite_01">网易云音乐</a>
                    <div className="select-list">
                        {
                            headerLink.map((item, index) => {
                                return(
                                    <div className="select-item" key={item.title}>
                                        {showSelectItem(item,index)}
                                    </div>
                                )
                            })
                        }
                    </div>
                </HeaderLeft>
                <HeaderRight>
                    <Input className="search" placeholder="音乐/视频/电台/用户" prefix={<SearchOutlined />}/>
                    <button className="create-center">创作者中心</button>
                    {/*eslint-disable-next-line*/ }
                    <a href="#" className="sign-in">登录</a>
                </HeaderRight>
            </div>

            <div className="divider"></div>
        </HeaderWrapper>
    )
})
